<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Очищаемая таблица</title>
  <link href="style.css" rel="stylesheet">
</head>
<body>

<h1>Пример минимально необходимой структуры таблицы (только HTML) для прохождения тестов:</h1>
<div class="example">
  <table>
    <thead>
    <tr>
      <th>Имя</th>
      <th>Возраст</th>
      <th>Зарплата</th>
      <th>Город</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Илья</td>
      <td>25</td>
      <td>1000</td>
      <td>Petrozavodsk</td>
      <td><button>X</button></td>
    </tr>
    </tbody>
  </table>
</div>

<h2>Результат выполнения вашего кода:</h2>

<script type="module">
  import UserTable from './index.js';

  let rows = [
    {
      name: 'Ilia',
      age: 25,
      salary: 1000,
      city: 'Petrozavodsk'
    },
    {
      name: 'Vasya',
      age: 14,
      salary: 1500,
      city: 'Moscow'
    },
    {
      name: 'Ivan',
      age: 22,
      salary: 100,
      city: 'Bryansk'
    },
    {
      name: 'Petya',
      age: 45,
      salary: 990,
      city: 'Chita'
    }
  ];

  let table = new UserTable(rows);
  document.body.append(table.elem);

</script>

</body>
</html>
